<template>
  <div>
    <box title="未处理工单">
      <div class="h-full flex flex-col px-[16px]">
        <!-- list -->
        <div class="flex-1">
          <div v-if="tableData.data.length != 0" class="pt-[26px]">
            <div class="w-[100%]  py-[16px]  pl-[16px] h-[142px] mb-[16px] cursor-pointer listbgc"
                 v-for="(item, index) in tableData.data" @click="workOrder(item)">
              <div class="flex justify-between">
                <div class="text-[16px] leading-[16px] h-[16px] relative ">{{ isNullOrEmpty( item.workOrderTitle ) }}
                  <div class="absolute bottom-[-3px] w-[100%] h-[5px] left-0 opacity-[0.5] bg-[#4583FF]"></div>
                </div>
                <div class=" h-[32px] mr-[16px] flex justify-center text-[16px] items-center  text-[#21CC31]">

                  {{ isNullOrEmpty( WORKORDERYTPE[item.workOrderType]?.label ) }}
                </div>
              </div>
              <div class="flex mt-[5px] gap-[22px]">
                <div class="text-[14px] text-[#D6D6D6]">工单发起</div>
                <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty( item.createdByName ) }}</div>
              </div>
              <div class="flex mt-[16px] gap-[22px]">
                <div class="text-[14px] text-[#D6D6D6]">等待处理</div>
                <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty( item.waitByName ) }}</div>
              </div>
              <div class="flex mt-[16px] gap-[22px]">
                <div class="text-[14px] text-[#D6D6D6]">发起时间</div>
                <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty( item.createdAt ) }}</div>
              </div>
            </div>
        
          </div>
          <nullpng v-else/>
        </div>
        <!-- 分页 -->
        <div class="pr-[16px] h-[59px] w-[100%]  flex justify-center items-center">
          <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
                         :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
                         style="color: #fff;" @current-change="getTableList" :pager-count="3"/>
        </div>
      </div>
    </box>
  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import {PAGE_LAYOUTLEFTS} from "@/constant";
import {screenprejectworkorders} from "@/api/screen/largeData";
import {WORKORDERYTPE} from "@/constant/alarm-mangenment";
import box from '@/views/large-data-screen/component/box.vue'
import { workoderIfo} from '@/views/large-data-screen/utils'
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()

const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = ref({
  page: 1,
  limit: 3
});
onMounted(() => {
  getTableList()// 获取表格数据
})

//点击事件
const workOrder = (item)=>{
  workoderIfo(item)
}
const getTableList = () => {
  screenprejectworkorders(searchFrom.value).then(res => {
    tableData.data = res.result.data
    tableData.total = res.result.total
  })
  // 获取表格数据
}
watch(() => useDataDashboardThemeStore.GET_SETTING('workfresh'), (newValue, oldValue) => {
  console.log('刷新下');
  
  getTableList()
}, { immediate: true })
</script>
<style lang="scss" scoped>
.listbg {
    background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(37, 176, 19, 1);
    border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
    background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(240, 50, 50, 1);
    border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbgc {
  background:rgba(41, 46, 72,0.6) ;
  // opacity: 0.6;
  border-image: linear-gradient(0deg, #4583FF, #0B3556) 10 10;
}
</style>
